/*——————通用模块——————*/

// 块标记自动居中
.block-center() {
    margin: 0 auto;
}
.block_center{
    margin: 0 auto;
}

// 盒子初始化，(宽[,高])
.box-init(@w: 0) when (isnumber(@w)) and (@w > 0) {
    width: @w;
}

.box-init(@w: 0,
@h: 0) when (isnumber(@w)) and (@w > 0) and (isnumber(@h)) and (@h > 0) {
    width: @w;
    height: @h;
}

// 超链接样式，(默认颜色[,选中颜色])
.link(@col: #7c7c7c) when (iscolor(@col)) {
    & {
        color: @col;
    }
}

.link(@col: #7c7c7c,
@hovcol: #e74c3c) when (iscolor(@col)) and (iscolor(@hovcol)) {
    & {
        color: @col;
    }
    &:hover {
        color: @hovcol;
    }
}

// ——————透明度，(0~100)——————
.alpha(@int: 50) when (isnumber(@int)) and (@int > 0) and (@int < 100) {
    @f: @int/100;
    filter: alpha(opacity=@int);
    -moz-opacity: @f;
    opacity: @f;
}

.opacity(@int: 50) when (isnumber(@int)) and (@int > 0) and (@int < 100) {
    @f: @int/100;
    filter: alpha(opacity=@int);
    -moz-opacity: @f;
    opacity: @f;
}

// 三角形-下
.triangle-bottom(@width,
@height,
@bgColor) {
    @_w: @width/2;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    border-color: @bgColor transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: ~'@{height}px @{_w}px 0 @{_w}px';
}

// ——————圆形，(长度，颜色)——————
.circle(@length: 50px,
@color: gray) when (isnumber(@length)) and (iscolor(@color)) {
    display: block;
    background-color: @color;
    border-radius: 50%;
    width: @length;
    height: @length;
}

// ——————椭圆——————
.ellipse(@w: 50px,@h: 25px,@color: gray) when (isnumber(@w)) and (isnumber(@h)) and(iscolor(@color)) {
    display: block;
    background-color: @color;
    border-radius: 50%;
    width: @w;
    height: @h;
}


// ——————变形——————
.transform(@func) {
    /*
    对元素进行旋转、缩放、移动或倾斜。
    none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。	
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。	
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。
    */
    
    transform: @func;
    -ms-transform: @func;
    /* IE 9 */
    
    -moz-transform: @func;
    /* Firefox */
    
    -webkit-transform: @func;
    /* Safari 和 Chrome */
    
    -o-transform: @func;
    /* Opera */
}

// ——————过度效果——————
.transition(@vars) {
    /*
    1.过渡效果：none 无过度，all 所有属性都将获得过渡效果，property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
    2.过度效果耗时
    3.效果曲线：linear 以相同速度始终，ease 慢快慢，ease-in 慢始，ease-out 慢终，ease-in-out 慢始慢终，cubic-bezier(n,n,n,n)  0 至 1 之间的数值
    */
    
    transition: @vars;
    -moz-transition: @vars;
    -webkit-transition: @vars;
    -o-transition: @vars;
}

// ——————创建动画——————
.animation(@vars) {
    /*
    animation 属性简写
    1.animation-name：规定需要绑定到选择器的 keyframe 名称
    2.animation-duration：规定完成动画所花费的时间，以秒或毫秒计
    3.animation-timing-function：规定动画的速度曲线
    4.animation-delay：规定在动画开始之前的延迟
    5.animation-iteration-count：规定动画应该播放的次数
    6.animation-direction：规定是否应该轮流反向播放动画
    */
    
    animation: @vars;
    /* Firefox */
    
    -moz-animation: @vars;
    /* Safari and Chrome */
    
    -webkit-animation: @vars;
    /* Opera */
    
    -o-animation: @vars;
}

// ——————动画开始时间——————
.animat_sleep(@time: 2s) {
    animation-delay: @time;
    /* Safari 和 Chrome */
    
    -webkit-animation-delay: @time;
}

// ——————动画-放射，支持IE9+——————
.animat_changeRadiate(@name) {
    @keyframes @name {
        0% {
            transform: scale(.222);
            .opacity(100);
        }
        50% {
            transform: scale(.622);
            .opacity(40);
        }
        98% {
            transform: scale(1);
            .opacity(20);
        }
        100% {
            .opacity(0);
        }
    }
    /* Firefox */
    
    @-moz-keyframes @name {
        0% {
            -moz-transform: scale(.222);
            .opacity(100);
        }
        50% {
            -moz-transform: scale(.622);
            transform: scale(.622);
            .opacity(40);
        }
        98% {
            -moz-transform: scale(1);
            transform: scale(1);
            .opacity(20);
        }
        100% {
            .opacity(0);
        }
    }
    /* Safari and Chrome */
    
    @-webkit-keyframes @name {
        0% {
            -webkit-transform: scale(.222);
            transform: scale(.222);
            .opacity(100);
        }
        50% {
            -webkit-transform: scale(.622);
            transform: scale(.622);
            .opacity(40);
        }
        98% {
            -webkit-transform: scale(1);
            transform: scale(1);
            .opacity(20);
        }
        100% {
            .opacity(0);
        }
    }
    /* Opera */
    
    @-o-keyframes @name {
        0% {
            -o-transform: scale(.222);
            transform: scale(.222);
            .opacity(100);
        }
        50% {
            -o-transform: scale(.622);
            transform: scale(.622);
            .opacity(40);
        }
        98% {
            -o-transform: scale(1);
            transform: scale(1);
            .opacity(20);
        }
        100% {
            .opacity(0);
        }
    }
    /* IE9 */
    
    @-o-keyframes @name {
        0% {
            -ms-transform: scale(.222);
            transform: scale(.222);
            .opacity(100);
        }
        50% {
            -ms-transform: scale(.622);
            transform: scale(.622);
            .opacity(40);
        }
        98% {
            -ms-transform: scale(1);
            transform: scale(1);
            .opacity(20);
        }
        100% {
            .opacity(0);
        }
    }
}

// 动画-色彩渐变
.animat_changeColor(@name,
@col1,
@col2,
@col3,
@col4) {
    @keyframes @name {
        0% {
            background: @col1;
        }
        25% {
            background: @col2;
        }
        50% {
            background: @col3;
        }
        100% {
            background: @col4;
        }
    }
    /* Firefox */
    
    @-moz-keyframes @name {
        0% {
            background: @col1;
        }
        25% {
            background: @col2;
        }
        50% {
            background: @col3;
        }
        100% {
            background: @col4;
        }
    }
    /* Safari and Chrome */
    
    @-webkit-keyframes @name {
        0% {
            background: @col1;
        }
        25% {
            background: @col2;
        }
        50% {
            background: @col3;
        }
        100% {
            background: @col4;
        }
    }
    /* Opera */
    
    @-o-keyframes @name {
        0% {
            background: @col1;
        }
        25% {
            background: @col2;
        }
        50% {
            background: @col3;
        }
        100% {
            background: @col4;
        }
    }
}

// 动画-起伏
.animat_fluctuate(@name) {
    @-webkit-keyframes @name {
        0% {
            -webkit-transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(20%);
        }
    }
    @-ms-keyframes @name {
        0% {
            -ms-transform: translateY(0);
        }
        100% {
            -ms-transform: translateY(20%);
        }
    }
    @-moz-keyframes @name {
        0% {
            -moz-transform: translateY(0);
        }
        100% {
            -moz-transform: translateY(20%);
        }
    }
    @-o-keyframes @name {
        0% {
            -o-transform: translateY(0);
        }
        100% {
            -o-transform: translateY(20%);
        }
    }
    @keyframes @name {
        0% {
            transform: translateY(0)
        }
        100% {
            transform: translateY(20%)
        }
    }
}


// 动画-起伏影子，(动画名，最小宽度，最小高度，放大倍数)
.animat_shadow(@name,@w_min:50px,@h_min:10px,@mulriple:2) {
    @-webkit-keyframes @name {
        0% {
            width: @w_min;
            height: @h_min;
            .opacity(60);
        }
        100% {
            width: @w_min * @mulriple;
            height: @h_min * @mulriple;
            .opacity(80);
        }
    }
    @-ms-keyframes @name {
        0% {
            width: @w_min;
            height: @h_min;
            .opacity(60);
        }
        100% {
            width: @w_min * @mulriple;
            height: @h_min * @mulriple;
            .opacity(80);
        }
    }
    @-moz-keyframes @name {
        0% {
            width: @w_min;
            height: @h_min;
            .opacity(60);
        }
        100% {
            width: @w_min * @mulriple;
            height: @h_min * @mulriple;
            .opacity(80);
        }
    }
    @-o-keyframes @name {
        0% {
            width: @w_min;
            height: @h_min;
            .opacity(60);
        }
        100% {
            width: @w_min * @mulriple;
            height: @h_min * @mulriple;
            .opacity(60);
        }
    }
    @keyframes @name {
        0% {
            width: @w_min;
            height: @h_min;
            .opacity(60);
        }
        100% {
            width: @w_min * @mulriple;
            height: @h_min * @mulriple;
            .opacity(80);
        }
    }
}